<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored ="false"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String dataValueBeanStr = (String)request.getAttribute("dataValueBeanStr");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>北京市电子行政监察平台-编辑字典词条</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="<%=path%>/css/base.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/frame.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/jquery-tree.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			var path = "<%=path%>";
		</script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-jtemplates.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.form.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.history.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.metadata.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.validate.fixed.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/config/config.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/util.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/oacore.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/jquery-tree.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/init.js"></script>
		<script type="text/javascript">
			var tree;
			var entryId = ${detailData.entryId};
			function moveUp()
			{
				var selected = tree.getSelectedContent();
				if(!selected)
					return false;
				var prevNode = tree.getNodePrevContent(tree.getPrev());
				if(!tree.getPrevContent())
					return;
				var params = {};
				var prevIdInfo;
				var idInfo = selected.id.split("_");
				if(!prevNode)
					prevIdInfo = [null, null];
				else
				{
					prevIdInfo = prevNode.id.split("_");
				}
				if(prevIdInfo[0])
					params[ACTIONS.MOVE_DATA.params.PREV_DATA_ID] = prevIdInfo[0];
				params[ACTIONS.MOVE_DATA.params.DATA_ID] = idInfo[0];
				params[ACTIONS.MOVE_DATA.params.VERSION] = idInfo[1];
				params[ACTIONS.MOVE_DATA.params.ENTRY_ID] = entryId;
				$.util.Data.request({
					url: ACTIONS.MOVE_DATA.url,
					data: params,
					async: false,
					type: "post",
					success: function (data) {
						$("#contentArea").empty();
						reloadList();
						//重选节点
						$("span.jqtree-node-content").each(function () {
								if(idInfo[0] == this.id.split("_")[0])
								{
									$(this).trigger("click");
									return false;
								}
							});
					}
				});
			};

			function moveDown()
			{
				var selected = tree.getSelectedContent();
				if(!selected)
					return false;
				var prevNode = tree.getNextContent();
				if(!prevNode)
					return;
				var params = {};
				var prevIdInfo;
				var idInfo = selected.id.split("_");
				if(!prevNode)
					prevIdInfo = [null, null];
				else
				{
					prevIdInfo = prevNode.id.split("_");
				}
				params[ACTIONS.MOVE_DATA.params.PREV_DATA_ID] = prevIdInfo[0];
				params[ACTIONS.MOVE_DATA.params.DATA_ID] = idInfo[0];
				params[ACTIONS.MOVE_DATA.params.VERSION] = idInfo[1];
				params[ACTIONS.MOVE_DATA.params.ENTRY_ID] = entryId;
				$.util.Data.request({
					url: ACTIONS.MOVE_DATA.url,
					data: params,
					async: false,
					type: "post",
					success: function (data) {
						$("#contentArea").empty();
						reloadList();
						//重选节点
						$("span.jqtree-node-content").each(function () {
								if(idInfo[0] == this.id.split("_")[0])
								{
									$(this).trigger("click");
									return false;
								}
							});
					}
				});
			};

			function delNode()
			{
				var selectedContent = tree.getSelectedContent();
				if(!selectedContent)
					return;
				oacore.Widget.Dialog.confirm("删除确认", "您确定删除此项吗？", function () {
						var params = $(selectedContent).data("source");
						var sourceKeys = [];
						for(var key in params)
							sourceKeys.push(key);
						for(var i=0;i<sourceKeys.length;++i)
						{
							params["detailData." + sourceKeys[i]] = params[sourceKeys[i]];
							delete params[sourceKeys[i]];
						}
						$.util.Data.request({
								url: ACTIONS.DEL_DATA.url,
								data: params,
								traditional: true,
								async: false,
								type: "post",
								success: function (data) {
									$("#contentArea").empty();
									reloadList();
								}
							});
					}, null);
			};

			function openDetail(nodeId)
			{
				var idInfo = nodeId.split("_");
				var params = {};
				params[ACTIONS.DATA_DETAIL.params.DATA_ID] = idInfo[0];
				params[ACTIONS.DATA_DETAIL.params.VERSION] = idInfo[1];
				$.util.Data.request({
						url: ACTIONS.DATA_DETAIL.url,
						data: params,
						type: "post",
						async: false,
						dataType: "json",
						success: function (data) {
							oacore.UI.render("form/data_detail", data, $("#contentArea"));
						},
						error: function () {
							$("#contentArea").html("获取详细信息失败!");
						}
					});
			};

			function openEdit()
			{
				var selectedContent = tree.getSelectedContent();
				if(!selectedContent)
					return;
				var idInfo = selectedContent.id.split("_");
				var params = {};
				params[ACTIONS.DATA_DETAIL.params.DATA_ID] = idInfo[0];
				params[ACTIONS.DATA_DETAIL.params.VERSION] = idInfo[1];
				$.util.Data.request({
						url: ACTIONS.DATA_DETAIL.url,
						data: params,
						async: false,
						dataType: "json",
						type: "post",
						success: function (data) {
							var parent = $("#contentArea");
							data.url = ACTIONS.EDIT_DATA.url;
							data.dataId = idInfo[0];
							oacore.UI.render("form/edit_custom_data", data, parent, function () {
									var form = $("#creatorForm");
									//验证
									//附加数据
									var objs = {};
									objs[ACTIONS.DATA_VALUE_MODIFY_UNIQUE.params.ENTRY_ID] = entryId;
									objs[ACTIONS.DATA_VALUE_MODIFY_UNIQUE.params.VALUE_ID] = idInfo[0];
									$("#name").data("_jqValidate_otherObjs" , objs);
									var validator = form.validate({
											rules: {
												"detailData.value": {
													required: true,
													dataUnique: ACTIONS.DATA_VALUE_MODIFY_UNIQUE,
													maxlength: 16
												},
												"detailData.dataValueDescliption":{
													maxlength: 64
												}
											},
											messages: {
												"detailData.value": {
													required: "必填项",
													dataUnique: "数据字典项名称已存在",
													maxlength: "名称最长为16个字符"
												},
												"detailData.dataValueDescliption":{
													maxlength: "描述最长为64个字符"
												}
											},
											submitHandler : function() {
												form.ajaxSubmit({async: false, dataType: "json", success: function (data) {
														var $selectedContent = $(selectedContent);
														$selectedContent.find("span.node-value:first").html(form.find("#name").val());
														var dataState = $(selectedContent).find("span.state:first");
														switch(form.find(".data-state[checked!='']:first").val())
														{
														case false:
															dataState.removeClass("enabled").addClass("disabled");
															dataState.html("(已禁用)");
															break;
														case true:
															dataState.removeClass("disabled").addClass("enabled");
															dataState.html("(已启用)");
															break;
														case "false":
															dataState.removeClass("enabled").addClass("disabled");
															dataState.html("(已禁用)");
															break;
														case "true":
															dataState.removeClass("disabled").addClass("enabled");
															dataState.html("(已启用)");
															break;
														}
														$("#contentArea").empty();
														reloadList();
														$("span.jqtree-node-content").each(function () {
															if(idInfo[0] == this.id.split("_")[0])
															{
																$(this).trigger("click");
																return false;
															}
														});
												}});
											}
										});
									parent.find("input[type='submit']").bind("click", function (event) {
											event.stopPropagation();
										});
								});
						},
						error: function () {
							$("#contentArea").html("获取详细信息失败!");
						}
					});
			};

			function openAdd()
			{
				var parent = $("#contentArea");
				var params = {};
				var selectedContent = tree.getSelectedContent();
				var selected = tree.getSelected();
				params.url = ACTIONS.ADD_DATA_ITEM.url;
				if(selectedContent)
					params.pid = selectedContent.id.split("_")[0];
				else
				{
					params.pid = null;
				}
				params.entryId = entryId;
				oacore.UI.render("form/add_data", params, parent, function () {
						var form = $("#creatorForm");
						//验证
						//附加数据
						var objs = {};
						objs[ACTIONS.DATA_VALUE_ADD_UNIQUE.params.ENTRY_ID] = entryId;
						$("#name").data("_jqValidate_otherObjs" , objs);
						objs[ACTIONS.DATA_KEY_UNIQUE.params.ENTRY_ID] = entryId;
						$("#key").data("_jqValidate_otherObjs" , objs);
						var validator = form.validate({
								rules: {
									"detailData.value": {
										required: true,
										dataUnique: ACTIONS.DATA_VALUE_ADD_UNIQUE,
										maxlength: 16
									},
									"detailData.key": {
										required: true,
										dataUnique: ACTIONS.DATA_KEY_UNIQUE,
										maxlength: 32
									},
									"detailData.dataValueDescliption":{
										maxlength: 64
									}
								},
								messages: {
									"detailData.value": {
										required: "必填项",
										dataUnique: "数据字典项名称已存在",
										maxlength: "名称最长为16个字符"
									},
									"detailData.key": {
										required: "必填项",
										dataUnique: "数据字典KEY值已存在",
										maxlength: "Key值最长为32个字符"
									},
									"detailData.dataValueDescliption":{
										maxlength: "描述最长为64个字符"
									}
								},
								submitHandler : function() {
									form.ajaxSubmit({async: false, dataType: "json", success: function (data) {
											var newData = {
													id: data[ACTIONS.ADD_DATA_ITEM.data.NEW_DATA_ID],
													version: 0,
													content: form.find("#name").val(),
													state: $(".data-state[checked!='']:first").val()
												};
											$("#contentArea").empty();
											reloadList();
											$("span.jqtree-node-content").each(function () {
												if(data[ACTIONS.ADD_DATA_ITEM.data.NEW_DATA_ID] == this.id.split("_")[0])
												{
													$(this).trigger("click");
													return false;
												}
											});
									}});
								}
							});
						parent.find("input[type='submit']").bind("click", function (event) {
								event.stopPropagation();
							});
					});
			};

			function reloadList() {
				var params = {};
				params[ACTIONS.GET_DATA_LIST.params.ENTRY_ID] = entryId;
				$.util.Data.request({
					url: ACTIONS.GET_DATA_LIST.url,
					data: params,
					async: false,
					type: "post",
					success: function (data) {
						tree = new $.Tree({
							parent: $("#treeArea"),
							source: data.dataValueDtos,
							selectMode: "single",
							sourceQuote: true,
							pretreatment: function (node) {
								var pedNode = {};
								pedNode.id = node.dataValueId + "_" + node.version;
								pedNode.content = "<span class='node-value'>" + $.util.toCharCodesForHTML(node.value) + "</span>";
								switch(node.isEnabled) 
								{
								case false:
									pedNode.content += "<span class='disabled state'>(已禁用)</span>";
									break;
								case true:
									pedNode.content += "<span class='enabled state'>(已启用)</span>";
									break;
								}
								return pedNode;
							},
							onSelect: function (node) {
								openDetail(node.id);
							}
						});
					}
				});
			};

			$(function () {
				//生成树
				reloadList();
				//节点绑定的事件
				$("#del").click(function () {
						delNode();
					});
				$("#add").click(function () {
						openAdd();
					});
				$("#edit").click(function () {
						openEdit();
					});
				$("#moveup").click(function () {
						moveUp();
					});
				$("#movedown").click(function () {
						moveDown();
					});
			});
		</script>
		<style type="text/css">
			div {
				position: static;
			}
		</style>
	</head>
	<body>
		<div id="mainPage" class="surround-layout">
			<jsp:include page="../frame/top.jsp" flush="true"></jsp:include>
			<div class="middle">
				<jsp:include page="../frame/middle_left.jsp" flush="true">
					<jsp:param value="1026-1032" name="view"/>
				</jsp:include>
				<!-- 右侧输出内容 -->
				<div class="right">
					<div class="right-all-content">
						<div>
							<span><a href="<%=path %>/web/goToListEntriesAction.action">数据字典</a></span>
							<span>&gt;&gt;</span>
							<span><a href="<%=path %>/web/findEntryAction.action?entryId=${detailData.entryId}">编辑词条</a></span>
						</div>
						<div class="inner-dialog">
							<h1 class="inner-dialog-title">编辑词条</h1>
							<div class="inner-dialog-content">
								<table class="inner-dialog-content-table new">
									<tr>
										<td valign="top" style="text-align: right;">
											<span class="detail-feild">词 条 名:</span>
										</td>
										<td valign="top">
											<s:property value="detailData.entryNameCN"/>
										</td>
									</tr>
									<tr>
										<td valign="top" style="text-align: right;">
											<span class="detail-feild">词条类型:</span>
										</td>
										<td valign="top">
											可定制
										</td>
									</tr>
									<tr>
										<td valign="top" style="text-align: right;">
											<span class="detail-feild">描　　述:</span>
										</td>
										<td valign="top">
											<s:property value="detailData.entryDescliption"/>
										</td>
									</tr>
									<tr>
										<td valign="top" style="text-align: right;">
											<span class="detail-feild">数 据 项:</span>
										</td>
									</tr>
								</table>
								<div class="inner-dialog main" style="margin-left: 16px;margin-bottom: 16px;width: 95%;">
									<h1 class="inner-dialog-title">数据项</h1>
									<div class="inner-dialog-content">
										<div class="idc-left">
											<div class="idc-top" style="">
												<div>
													<table class="tree-op-group">
														<tbody>
															<tr>
																<td>
																	<button class="dd-op add" id="add"></button>
																</td>
																<td>
																	<button class="dd-op moveup" id="moveup"></button>
																</td>
																<td>
																	<button class="dd-op movedown" id="movedown"></button>
																</td>
																<td>
																	<button class="dd-op del" id="del"></button>
																</td>
																<td>
																	<button class="dd-op edit" id="edit"></button>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
											<div class="idc-bottom">
												<table>
													<tbody>
														<tr>
															<td>
																<div id="treeArea"></div>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div class="idc-right" id="contentArea" style="">
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--  -->
			</div>
		</div>
	</body>
</html>